<template>
  <div class="total-balance">
    <div class="top flex-right">
      <el-button type="primary" class="start-btn" @click="apply">申请查询</el-button>
      <el-button type="primary" class="fresh" @click="search">刷新查询结果</el-button>
    </div>
    <!-- 数据表 -->
    <div class="data-table">
      <el-table
        size="medium"
        v-loading="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(211, 215, 212, 0.5)"
        :data="tableData"
        stripe
        header-cell-class-name="headerStyle"
        style="width: 100%"
      >
        <el-table-column align="center" prop="currency" label="币种" width="200"></el-table-column>
        <el-table-column align="center" prop="count" label="地址总数"></el-table-column>
        <el-table-column align="center" prop="total" label="总额"></el-table-column>
        <el-table-column align="center" prop="query_time" label="查询时间" width="250"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { startSearch, searchList } from "./Assets.service.js";
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        platform_id: this.$store.state.userInfo.platform_id,
        status: 0,
        type: 0,
        page: 1,
        size: 10
      },
      total: 0,
      loading: false
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    async search() {
      this.loading = true;
      const res = await searchList();
      this.tableData = res.data || [];
      this.loading = false;
    },
    apply() {
      this.$alert(
        "是否发起托管代币余额查询？<br><span class='confirm-tip-color'>提示：查询过程可能会耗时10分钟左右。</span>",
        "申请查询",
        {
          confirmButtonText: "确定",
          dangerouslyUseHTMLString: true,
          callback: async action => {
            if (action === "confirm") {
              const res = await startSearch();
              if (res.code == 1)
                this.$message({
                  type: "success",
                  message: `发起成功`
                });
            }
          }
        }
      );
    }
  }
};
</script>

<style lang="scss">
.total-balance {
  position: relative;
  min-height: calc(100vh - 100px);
  .top {
  }
  .data-table {
    position: relative;
    // padding-bottom: 20px;
    background: #fff;
    border-radius: 5px;
    margin-top: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 15px;
  }
  .tip {
    font-size: 10px;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
}
</style>